<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useFuncStore } from '../../store';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { ElMessageBox, FormInstance, FormRules } from 'element-plus';

const funcStore = useFuncStore();
const {SysFuncs}=funcStore
const {funcTreeWithNoLeaf,allFuncs} = storeToRefs(funcStore);
const show =ref<boolean>(false)
const model=reactive<API.Func.Add>({func_name:'',func_fid:0,func_key:""})
const isLeaf=ref<boolean>(false)
watch(isLeaf,()=>{model.func_key=""})
const formRef=ref<FormInstance | null>(null)
const rules:FormRules={
    func_name:[{
        //ts-ignore
        validator(rule,value,cb){
            if(value.trim()===''){
                cb(new Error('功能名称不能为空'))
            }else if(value.trim().length<2 || value.trim().length>15){
                cb(new Error("功能名称长度2-15"))
            }else if(allFuncs.value.findIndex(item=>item.func_name===value.trim() && item.func_fid===model.func_fid)!==-1){
                cb(new Error("功能名称已存在"))
            }else{
                cb()
            }
        },
        trigger:'blur'
    }],
    func_fid:[{
        validator(rule,value,cb){
            if(isLeaf.value&&value===""){
                cb(new Error('叶子节点必须绑定功能'))
            }else{
                cb()
            }
        },
        trigger:'change'
    }],
    func_key:[{
         //ts-ignore
        validator(rule,value,cb){
            if(isLeaf.value&&value.trim()===''){
                cb(new Error('请输入功能键'))
            }else{
                cb()
            }
        },
        trigger:'blur'
    }]
}
// const cascaderValue=computed({
//     get:()=>{
//         let idPath=[model.func_fid],fid=model.func_fid;
//         while(fid!==0){
//             fid=allFuncs.value.find(item=>item.func_id===fid)?.func_fid as number
            
//             idPath.unshift(fid)
//         }
//         return idPath
//     }
// })
const cascaderValue=computed(()=>{
        let idPath=[model.func_fid],fid=model.func_fid;
        while(fid!==0){
            fid=allFuncs.value.find(item=>item.func_id===fid)?.func_fid as number
            idPath.unshift(fid)
        }
        return idPath
})
interface emitsType{
    (name:'save',func:API.Func.Add):void
}
const emit=defineEmits<emitsType>()
defineExpose({
    begin:(func:UI.Func)=>{
        model.func_name=''
        model.func_fid=func.func_id
        model.func_key='';
        nextTick(()=>  show.value=true)//在下一个时间片执行回调函数
      
    },
    end:()=>show.value=false
    
})
const cancel=()=>{
ElMessageBox({
    title:'退出',
    message:'确定要取消吗？取消填写的数据会消失',
    showCancelButton:true
}).then(()=>{
    show.value=false
})

}
// const rules:FormRules={
//   func_name:[
//     {required:true,message:"名字不能为空",trigger:"blur"},
//     {min:2,max:10,message:"名字长度在2到10之间",trigger:"blur"}
//   ]
//   }
const saveHandler=async()=>{
    await formRef.value?.validate()
    emit('save',model)
}
</script>

<template>
   <el-dialog v-model="show" title="功能管理--添加"   >
    <el-form :rules="rules" :model="model" ref="formRef">
        <el-form-item label="父级功能：">
           <el-cascader 
           disabled
           :model-value="cascaderValue"
           :options="funcTreeWithNoLeaf" 
           :props="{value:'func_id',label:'func_name'
           ,checkStrictly:true}"
           :collapse-tags="true" 
           :collapse-tags-tooltip="true"
           ></el-cascader>
        </el-form-item>
        <el-form-item label="功能类型" >
            <el-radio-group v-model="isLeaf" >
                <el-radio :value="false">非叶子功能</el-radio>
                <el-radio :value="true">叶子功能</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="功能名称：" prop="func_name" >
            <el-input placeholder="请输入功能名称" v-model="model.func_name"></el-input>
        </el-form-item>
        <el-form-item label="功能绑定" v-show="isLeaf" prop="func_key"> 
            <el-select v-model="model.func_key" placeholder="--请选择--">
               
                <el-option
                
                :disabled="allFuncs.findIndex(item=>item.func_key===k) !==-1"
                v-for="(v,k) in SysFuncs" :key="k" :label="v" :value="k">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
        <div>
            <el-button type="primary" @click="saveHandler">保存</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
        </div>
    </template>
   </el-dialog>
</template>

<style scoped>

</style>